padding#

The padding property adds space around the content of a view, mirroring the behavior of SwiftUI’s padding modifier. It helps separate a view from surrounding elements and improve layout clarity.

Definition#

1padding?: true | number | {
2  horizontal?: number | true
3  vertical?: number | true
4  leading?: number | true
5  trailing?: number | true
6  top?: number | true
7  bottom?: number | true
8}

Supported Formats#

You can specify padding in multiple ways:

1. Default Padding#

1padding: true

Applies the system default padding on all sides.

Example:#

1<Text padding={true}>
2  Default Padding
3</Text>

2. Uniform Padding#

1padding: 8

Applies the same number of points of padding to all edges.

Example:#

1<VStack padding={12}>
2  <Text>Even Padding</Text>
3</VStack>

3. Directional Padding Object#

Specify individual edges or edge groups.

1padding: {
2  horizontal: 16,
3  vertical: 8
4}

Supported Keys:#

Each value can be a number or true. When set to true, it applies the default system padding for that edge.

Example:#

1<Text
2  padding={{
3    top: 10,
4    bottom: 10,
5    horizontal: 16
6  }}
7>
8  Custom Edge Padding
9</Text>

Example with true for specific edges:#

1<Text
2  padding={{
3    top: true,
4    horizontal: 12
5  }}
6>
7  Mixed Padding
8</Text>

Notes#

• Padding does not affect the size of the view’s content directly, but adjusts the space around it.
• Combining directional keys allows for precise control over layout spacing.
• horizontal/vertical and leading/trailing can be combined. The more specific key (like leading) overrides the group key (like horizontal) if both are provided.